<template>
    <div>
        <my-header></my-header>
        <div class="orderList">
            <Table :columns="columns" :data="data" height="570"></Table>
        </div>

    </div>

</template>

<script>
  import myFooter from '../../components/footer'
  import myHeader from '../../components/header'
  import expandRow from './expandRow'
  export default {
    components: {
      myHeader,
      myFooter,
      expandRow
    },
    data() {
      return {
        columns: [
          {
            type: 'expand',
            width: 50,
            render: (h, params) => {
              return h(expandRow, {
                props: {
                  row: params.row
                }
              })
            }
          },
          {
            title: '订单号',
            key: 'orderNo'
          },
          {
            title: '收件人',
            key: 'receiver'
          },
          {
            title: '订单状态',
            key: 'statusShow',
            filters: [
              {
                label: '已完成',
                value: '0'
              },
              {
                label: '未完成',
                value: '1'
              }
            ],
            filterMultiple: false,
            filterMethod (value, row) {
              if (value === '0') {
                return row.status === '0';
              } else if (value === '1') {
                return row.status === '1';
              }
            }
          },
          {
            title: ' ',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              if (params.row.status === '0') {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small',
                      disabled: true
                    },
                    style: {
                      marginRight: '5px',
                      width: '60%'
                    },
                    on: {
                      click: () => {
                        console.log(params.row.orderNo);
                      }
                    },

                  }, '已确认')
                ]);
              }
              else {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px',
                      width: '60%'
                    },
                    on: {
                      click: () => {
                        console.log(params.row.orderNo);
                      }
                    },

                  }, '确认送达')
                ]);
              }

            }
          }
        ],
        data: [
          {
            receiver: '王祺',
            orderNo: 2341231,
            address: '四川成都',
            goodsNum: '1',
            book: [{
              id: '1001',
              bookName: '三体',
              price: '56.00'
            }],
            totalPrice: '56.00',
            status: '0',
            statusShow: '已完成'
          },
          {
            receiver: '余浪',
            orderNo: 2348831,
            address: '江西九江',
            goodsNum: '2',
            book: [{
              id: '1001',
              bookName: '三体',
              price: '56.00'
            },{
              id: '1002',
              bookName: '格林童话',
              price: '23.00'
            }],
            totalPrice: '79.00',
            status: '1',
            statusShow: '未送达'
          },
          {
            receiver: '王祺',
            orderNo: 2341231,
            address: '四川成都',
            goodsNum: '1',
            book: [{
              id: '1001',
              bookName: '三体',
              price: '56.00'
            }],
            totalPrice: '56.00',
            status: '1',
            statusShow: '未送达'
          },
          {
            receiver: '王祺',
            orderNo: 2341231,
            address: '四川成都',
            goodsNum: '1',
            book: [{
              id: '1001',
              bookName: '三体',
              price: '56.00'
            }],
            totalPrice: '56.00',
            status: '0',
            statusShow: '已完成'
          }
        ]
      };
    }
  }
</script>

<style scoped>
    .orderList {
        width: 66vw;
        margin: 10% auto;
    }
</style>
